<template>
  <div style="height: 100%; height: 100%; position: relative" ref="D3_dom">
    <div class="button_box">
        <el-button  type="primary" size="mini">查看某人轨迹</el-button>
      
        <el-input
            type="textarea"
            placeholder="坐标值"
            v-model="textarea"
            >
            </el-input>
            <el-button  type="primary" @click="handleSelect('定标1')" size="mini">选中评标1房间</el-button>
            <el-button  type="primary" @click="handleSelect('评标12')" size="mini">选中评标12房间</el-button>
            <el-button  type="primary" @click="handleSelect('评标15')" size="mini">选中评标15房间</el-button>
            <el-button  type="primary" @click="handleSelect('BIM评标室')" size="mini">选中BIM评标室</el-button>
            <el-button  type="primary" size="mini">画轨迹</el-button>
            <el-button  type="primary"  @click="handleClear"  size="mini">清空选中</el-button>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// import { CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer.js"
import model from "./model.js"; //模型对象
export default {
  data() {
    return {
      D3data: {},
      textarea: "",
    };
  },
  methods: {
    handleClear(){
       this.D3data.scene.traverse(function(obj) {
        if (obj.isMesh) {//判断是否是网格模型
          obj.material.color.set(new THREE.Color("#fff"))
        }
        });
    },
    handleSelect(name){
        // 0x00FFFFFF 
      this.D3data.scene.getObjectByName(name).material.color.set(new THREE.Color("#CD5C5C"))
    },
    initDiv() {
      // const width = window.innerWidth;
      // const height = window.innerHeight;
      // 获取dom节点
      const width = this.$refs["D3_dom"].offsetWidth;
      const height = this.$refs["D3_dom"].offsetHeight;
      //场景
      const scene = new THREE.Scene();
      // scene.background = new THREE.Color('#7b7e80');
      scene.add(model);

      // 辅助坐标系
      const axesHelper = new THREE.AxesHelper(100);
      scene.add(axesHelper);
      // 添加一个辅助网格地面 1468 × 400
      // const gridHelper = new THREE.GridHelper(1468, 400, 0x004444, 0x004444);
      // scene.add(gridHelper);

      //光源设置
      const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      directionalLight.position.set(100, 60, 50);
      scene.add(directionalLight);
      const ambient = new THREE.AmbientLight(0xffffff, 2);
      scene.add(ambient);

      //渲染器和相机

      const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
      camera.position.set(320, 200, 1000);
      camera.lookAt(320, 200, 0);

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);

      this.$refs["D3_dom"]?.appendChild(renderer.domElement);
      // document.body.appendChild(renderer.domElement);

      // 渲染循环
      function render() {
        renderer.render(scene, camera);
        requestAnimationFrame(render);
      }
      render();

      const controls = new OrbitControls(camera, renderer.domElement);
      // 缩放范围
      controls.target.set(320, 200, 0); //与lookAt参数保持一致
      controls.update(); //update()函数内会执行camera.lookAt(controls.target)
      // controls.enableRotate  = true // 禁止旋转
      // controls.enableZoom = true; //禁止缩放
      // //相机位置与观察目标点最小值
      // controls.minDistance = 800;
      // //相机位置与观察目标点最大值
      // controls.maxDistance = 1500;
      // controls.maxTargetRadius = 400

      // controls.mouseButtons = {
      //     //左键平移
      //     LEFT: THREE.MOUSE.PAN,
      //     //滚轮滑动
      //     MIDDLE: THREE.MOUSE.DOLLY,
      //     //右键旋转
      //     RIGHT: THREE.MOUSE.ROTATE,
      // };

      // 用不到
      // controls.minZoom = -1;
      // controls.maxZoom = 2;
      // controls.update();
      // controls.minTargetRadius  =
      // controls.touches = {
      //                         ONE: THREE.TOUCH.DOLLY_PAN ,
      //                         TWO: THREE.TOUCH.ROTATE,
      //                     }
      controls.update();

      // 画布跟随窗口变化
      window.onresize = () => {
        const width = this.$refs["D3_dom"].offsetWidth;
        const height = this.$refs["D3_dom"].offsetHeight;
        renderer.setSize(width, height);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
      };

      return {
        scene,
        controls,
      };
    },
  },
  mounted() {
    this.D3data =   this.initDiv()
  },
};
</script>

<style scoped>
.button_box {
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>
